---
import Page from '$layouts/Page.astro';
import localeStaticPaths from '$lib/localeStaticPaths';
import translate from '$i18n/translate';
import tPage from '$i18n/translations/pages/home';
import tRole from '$i18n/translations/enums/committeeRole';
import type Locale from '$types/Locale';
import { getMostRecentNewsItem } from '$lib/newsUtils';
import contactDetails from '$data/contactDetails';
import NewsIndex from '$components/NewsIndex/NewsIndex.astro';
import committee from '$data/committee';
import Button from '$components/Button.astro';
import CommitteeRole from '$enums/CommitteeRole';

export async function getStaticPaths() {
  return localeStaticPaths;
}

const locale = Astro.params.locale as Locale;
const t = translate(locale);
const mostRecentNewsItem = await getMostRecentNewsItem(locale);
---

<Page title={t(tPage, { key: 'title' })}>
  <section>
    <h2 set:html={t(tPage, { key: 'submit' })} />
    <p set:html={t(tPage, { key: 'submit-para-1' })} />
    <p set:html={t(tPage, { key: 'submit-para-2' })} />
  </section>
  <section>
    <h2 class="grid-span-6" set:html={t(tPage, { key: 'news' })} />
    <NewsIndex newsItems={mostRecentNewsItem ? [mostRecentNewsItem] : []} headingLevel="h3" />
    {
      mostRecentNewsItem && (
        <Button classNames="grid-span-3 grid-prose-end" href={`/${locale}/news`}>
          {t(tPage, { key: 'aw-news' })} ▶
        </Button>
      )
    }
  </section>

  <section id="about">
    <h2 set:html={t(tPage, { key: 'about-us' })} />
    <p set:html={t(tPage, { key: 'about-us-para-1' })} />
    <p set:html={t(tPage, { key: 'about-us-para-2' })} />
    <p set:html={t(tPage, { key: 'about-us-para-3' })} />
    <h3 set:html={t(tPage, { key: 'meet-the-commattee' })} />
    <p class="italic">{t(tPage, { key: 'mair-commattee-details-soon' })}</p>
    <ul>
      {
        committee.map((member) => (
          <li class="committee__member">
            {member.img && <img class="committee__member__img" src={member.img.src} alt="" />}
            <div class="committee__member__text">
              <h4>
                {member.name}
                {member.roles.length > 0 && (
                  <span class="font-weight-lighter">
                    |{' '}
                    {member.roles.map((role) => t(tRole, { key: CommitteeRole[role] })).join(', ')}
                  </span>
                )}
              </h4>
              {member.bio && <p set:html={member.bio[locale]} />}
            </div>
          </li>
        ))
      }
    </ul>
  </section>

  <section>
    <h2 set:html={t(tPage, { key: 'furthsettins' })} />
    <p set:html={t(tPage, { key: 'furthsettins-para' })} />
    <Button classNames="grid-span-3 grid-prose-end" href={`/${locale}/furthsettins`}>
      {t(tPage, { key: 'aw-furthsettins' })} ▶
    </Button>
  </section>

  <section id="jyne">
    <h2 set:html={t(tPage, { key: 'jyne' })} />

    <h3 set:html={t(tPage, { key: 'why-jyne' })} />
    <p set:html={t(tPage, { key: 'why-jyne-para-1' })} />
    <p set:html={t(tPage, { key: 'why-jyne-para-2' })} />
    <p set:html={t(tPage, { key: 'why-jyne-para-3' })} />

    <h3 set:html={t(tPage, { key: 'hou-jyne' })} />
    <p set:html={t(tPage, { key: 'hou-jyne-para-1' })} />
    <p
      set:html={t(tPage, {
        key: 'hou-jyne-para-2',
        membershipEmail: contactDetails.membershipSecretary.emailAddress,
      })}
    />
  </section>

  <section id="contact">
    <h2 set:html={t(tPage, { key: 'contact' })} />
    <a class="link" href={`${locale}/mailto:${contactDetails.generalEnquiries.emailAddress}`}>
      {contactDetails.generalEnquiries.emailAddress}
    </a>
    <address>
      Scots Language Society<br />
       c/o 61 Cliffburn Road<br />
       Arbroath<br />
       Angus<br />
       DD11 5BA<br />
       United Kingdom<br />
    </address>
  </section>
</Page>